<template>
  <div id="TeacherIndex">
    <!-- 个人信息展示 -->
    <div class="right-person">
      <b-card>
        <b-button id="modify-person1" @click="skipChangeEmail()">
          <span class="iconfont icon-xiugai"></span>
        </b-button>
        <b-tooltip target="modify-person1" variant="light" triggers="hover">修改邮箱</b-tooltip>
        <b-button id="modify-person2" @click=" dialogFormVisible1 = true">
          <span class="iconfont icon-xiugaimima1"></span>
        </b-button>
        <b-tooltip target="modify-person2" variant="light" triggers="hover">修改密码</b-tooltip>
        <b-button id="exit" @click="exit()" variant="primary">
          <span class="iconfont icon-tuichu1"></span>
        </b-button>
        <b-tooltip target="exit" variant="light" triggers="hover">退出</b-tooltip>
        <b-row>
          <div class="left-msg">
            <span class="iconfont icon-xingming"></span>
            <span v-if="personDataForm!=null" @click=" dialogFormVisible3 = true" id="mr-auto">{{personDataForm.realName}}</span>
            <span v-else @click=" dialogFormVisible3 = true" id="mr-auto">{{personDataForm.realName}}</span>
            <b-tooltip target="mr-auto" variant="light" triggers="hover">查看个人信息</b-tooltip>
            <br />
            <span class="iconfont icon-banji"></span>
            <span class="clazz-name">{{personDataForm.accountId}}</span>
          </div>
          <!-- 对应操作图标 -->
          <div class="left-operate">
            <b-row @click="skipMyCollection()">
              <span class="iconfont icon-shoucang"></span>
              <p>我的收藏</p>
            </b-row>
            <b-row @click="skipPulish()">
              <span class="iconfont icon-yitianxie"></span>
              <p>已发布收集表</p>
            </b-row>
          </div>
        </b-row>
      </b-card>
    </div>
    <!-- 个人信息展示 -->

    <!-- 公告展示 -->
    <div class="right-notice">
      <b-card v-for="(item,index) in noticeData " :key="index">
        <div class="num-border">
          <div class="num">{{index+1}}</div>
          <span>{{item.createTime}}</span>
        </div>
        <span>{{item.title}}</span>
        <b-card-text>{{item.content}}</b-card-text>
      </b-card>
    </div>
    <!-- 分页区域 start-->
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="skipPage"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
    ></el-pagination>
    <!-- 分页区域 end-->
    <!-- 公告展示end -->
    <!-- 修改密码弹出框 -->
    <el-dialog
      :modal-append-to-body="modal"
      title="修改密码"
      :visible.sync=" dialogFormVisible1"
      width="40%"
      center
    >
      <el-form :model="changePwdForm" ref="changePwdForm" :rules="formPasswordRules" status-icon>
        <el-form-item label="原密码：" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="changePwdForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" :label-width="formLabelWidth" prop="newPassword">
          <el-input type="password" v-model="changePwdForm.newPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" :label-width="formLabelWidth" prop="rePassword">
          <el-input type="password" v-model="changePwdForm.rePassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="changePwd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码弹出框end -->
    <!-- 添加公告弹出框 -->
    <el-dialog
      :modal-append-to-body="modal"
      title="发布公告"
      :visible.sync=" dialogFormVisible2"
      width="40%"
      center
    >
      <el-form :model="publishNoticeForm">
        <el-form-item label="公告标题：" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="publishNoticeForm.noticeTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告内容：" :label-width="formLabelWidth">
          <el-input
            cols="8"
            type="textarea"
            v-model="publishNoticeForm.noticeContent"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">发布</el-button>
      </div>
    </el-dialog>
    <!-- 添加公告弹出框end -->
    <!-- 查看个人信息弹出框 -->
    <div class="checkPersonMsg">
      <el-dialog
        :modal-append-to-body="modal"
        title="个人信息"
        :visible.sync="dialogFormVisible3"
        width="50%"
        center
      >
        <el-form :model="personDataForm" :disabled="true">
          <b-row>
            <b-col cols="5">
              <el-form-item label="工号：" :label-width="formLabelWidth">
                <el-input type="text" v-model="personDataForm.accountId" autocomplete="off"></el-input>
              </el-form-item>
            </b-col>
            <b-col cols="5">
              <el-form-item label="姓名：" :label-width="formLabelWidth">
                <el-input type="text" v-model="personDataForm.accountName" autocomplete="off"></el-input>
              </el-form-item>
            </b-col>
          </b-row>
          <b-row>
            <b-col cols="5">
              <el-form-item label="性别：" :label-width="formLabelWidth">
                <el-input type="text" v-model="personDataForm.gender" autocomplete="off"></el-input>
              </el-form-item>
            </b-col>
            <b-col cols="5">
              <el-form-item label="邮箱：" :label-width="formLabelWidth">
                <el-input type="text" v-model="personDataForm.email" autocomplete="off"></el-input>
              </el-form-item>
            </b-col>
          </b-row>
          <b-row>
            <b-col cols="5">
              <el-form-item label="状态：" :label-width="formLabelWidth">
                <el-input type="text" v-model="personDataForm.loginStatusValue" autocomplete="off"></el-input>
              </el-form-item>
            </b-col>
          </b-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible3 = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 查看个人信息弹出框end -->
  </div>
</template>
<script>
export default {
  name: "index",

  data() {
    let validatePass = (rule, value, callback) => {
      if (value !== this.personDataForm.accountPwd) {
        callback(new Error("旧密码输入错误!"));
      }
      callback();
    };
    let validatePass1 = (rule, value, callback) => {
      if (this.changePwdForm.newPassword !== "") {
        this.$refs.changePwdForm.validateField("rePassword");
      }
      callback();
    };
    let validatePass2 = (rule, value, callback) => {
      if (value !== this.changePwdForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 公告展示
      noticeData: [],
      total: 0,
      pages: 0,
      pageSize: 7,
      currentPage: 1,
      // 公告展示end
      // 登录的个人信息
      personDataForm: [],
      // 登录的个人信息end
      // 模态框
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      formLabelWidth: "120px",
      modal: false,
      changeEmailForm: {
        email: "",
        verify: ""
      },
      changePwdForm: {
        password: "",
        newPassword: "",
        rePassword: ""
      },
      formPasswordRules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validatePass1, trigger: "blur" }
        ],
        rePassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ]
      },
      publishNoticeForm: {
        noticeTitle: "",
        noticeContent: ""
      }
      // 模态框end
    };
  },
  created() {
    // 获取个人信息
    this.personDataForm = JSON.parse(sessionStorage.getItem("toIndexForm"));
    this.selectNotice();
  },
  methods: {
    // 修改密码
    changePwd() {
      this.dialogFormVisible1 = false;
      console.log(this.changePwdForm);
      this.$put_form(this.$urlPath.user + "/account/password/update", {
        oldPassword: this.changePwdForm.password,
        newPassword: this.changePwdForm.newPassword
      })
        .then(resp => {
          console.log("then");
          console.log(resp);
          if (resp.code == 200) {
            this.$message.success(resp.message);
            window.localStorage.removeItem("cicToken");
            // window.sessionStorage.removeItem("cicToken");
            this.$router.push({ path: "/" });
          } else {
            this.$message.error(resp.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 根据页码跳转
    skipPage: function(currentPage) {
      this.currentPage = currentPage;
      this.$get(
        this.$urlPath.notice +
          "/notice/noticeAdmins/" +
          currentPage +
          "/" +
          this.pageSize
      )
        .then(resp => {
          if (resp.code == 200) {
            this.noticeData = resp.data.list;
            //  this.pages = resp.data.data.list.pages
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询收集表列表
    // 查询公告数据
    selectNotice() {
      this.$get(
        this.$urlPath.notice +
          "/notice/noticeAdmins/" +
          this.currentPage +
          "/" +
          this.pageSize
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data.list == null) {
              this.tableData = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.noticeData = resp.data.list;
              this.total = resp.data.total;
              this.pageSize = resp.data.pageSize;
            }
          }

          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询公告数据end
    // 跳转已发表信息表列表页
    skipPulish() {
      this.$router.push({ path: "/publishTable" });
    },
    // 跳转修改邮箱页
    skipChangeEmail() {
      this.$router.push({ path: "/changeEmail" });
    },
    // 跳转我的收藏页
    skipMyCollection() {
      this.$router.push({ path: "/myCollection" });
    },
    // 退出
    exit() {
      this.$put_form(this.$urlPath.user + "/account/outLogin").then(resp => {
        if (resp.code != 200) {
          return this.$message.error("退出登录失败！");
        }
        // 退出登录
        window.localStorage.removeItem("cicToken");
        // window.sessionStorage.removeItem("cicToken");
        this.$router.push({ path: "/" });
      });
    }
  }
};
</script>
<style lang="less">
@import "../assets/less/leftSide.less";
</style>